<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MineSweeper</title>
    <script src="./js/three.min.js"></script>
    <link rel="stylesheet" href="./css/version.css" />
    <link rel="stylesheet" href="./css/fonts.css" />
    <style>
      body,
      html {
        margin: 0;
        overflow: hidden;
      }
      #box {
        position: fixed;
        text-align: center;
        left: 50%;
        width: 90%;
        /* top: calc(50% + 40px); */
        top: 60%;
        transform: translate(-50%, -50%);
        color: #123;
        font-size: 18px;
        background-color: #e0e0e0;
        max-width: 500px;
      }
      .beginBtn,
      .settingBtn {
        background: none;
        padding: 4px 10px;
        font-size: 18px;
        border: dimgray solid 2px;
        border-radius: 10px;
        flex: 1;
        margin: 0 10px;
      }
      input {
        background: none;
        /* width: 50px; */
        border: dimgray solid 2px;
        padding: 2px 8px 2px 15px;
        border-radius: 12px;
      }
      .grid {
        display: grid;
        grid-template-columns: 2fr 100px 5fr;
        gap: 10px;
        width: 100%;
        clear: both;
      }
      .tip {
        font-size: 16px;
      }
      #setting {
        position: fixed;
        width: 100%;
        height: 100%;
        background: #0005;
      }
      .setting_box {
        width: 90%;
        max-width: 500px;
        height: 400px;
        border-radius: 20px;
        border: dimgray solid 2px;
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: #eee;
        display: flex;
        flex-direction: column;
      }
      .setting_box h2 {
        border-bottom: dotted 2px;
        margin-bottom: 4px;
      }
      .setting_box .btnOK {
        display: flex;
        margin: 0 20px;
        margin-bottom: 40px;
      }
      .setting_box .select_color {
        background: lightgreen;
        border-radius: 8px;
        border: green solid 1px;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div class="grid">
        <div style="grid-column: span 3">游戏设置</div>
        x轴：<input type="number" name="ux" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" />
        <lable style="grid-row: span 2; margin: auto" class="tip">xyz不建议超过10<br />死机别怪我</lable>
        y轴：<input type="number" name="uy" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" /> z轴：<input
          type="number"
          name="uz"
          onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
        />
        <lable class="tip" style="grid-row: span 2; margin: auto"
          >雷数最大值为方块<br />
          个数的一半</lable
        >
        雷数：<input type="number" name="mine" oninput="limitMineNum()" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" />
      </div>
      <div style="margin-top: 20px; display: flex; width: 80%; margin: 10px auto">
        <button onclick="handleBegin()" class="beginBtn">开始游戏</button>
        <button onclick="ThemeInit.handleSetting()" class="settingBtn">游戏设置</button>
      </div>
    </div>
    <div id="setting" style="visibility: hidden">
      <div class="setting_box">
        <div style="margin: 20px; flex: 1">
          <h2>颜色选择</h2>
          <div id="s_colors" style="display: grid; grid-template-columns: 50% 50%"></div>
          <h2>字体选择</h2>
          <select name="font" id="s_font">
            <option value="0" onclick="ThemeInit.selected.font = undefined">默认字体</option>
          </select>
          <h2>音效选择</h2>
          <label style="color: red">*开发事故，暂无法使用</label>
          <div style="display: flex">
            <div style="flex: 1; margin-right: 10px">
              背景:
              <select name="music_bgm" id="s_music_bgm" style="width: 100%" disabled="disabled">
                <option value="0" onclick="ThemeInit.selected.bgm = undefined,ThemeInit.bgmAudio.pause()">无音效</option>
              </select>
            </div>
            <div style="flex: 1; margin-right: 10px">
              游戏:
              <select name="music_game" id="s_music_game" style="width: 100%" disabled="disabled">
                <option value="0" onclick="ThemeInit.selected.game_music = undefined">无音效</option>
              </select>
            </div>
          </div>
        </div>
        <div class="btnOK">
          <button class="beginBtn" onclick="ThemeInit.saveTheme()">确 定</button>
          <button class="beginBtn" onclick="ThemeInit.settingBack()">返 回</button>
        </div>
      </div>
    </div>
  </body>
  <script src="./js/title.js"></script>
  <script src="./js/versionCtrl.js"></script>
  <script src="./js/setting.js"></script>
</html>
